import * as React from "react"

const MIN_PHABLET_BREAKPOINT = 768

const MAX_PHABLET_BREAKPOINT = 1280

export function useIsPhablet() {
    const [isPhablet, setIsPhablet] = React.useState<boolean | undefined>(undefined)

    React.useEffect(() => {
        const mql = window.matchMedia(`(min-width:${MIN_PHABLET_BREAKPOINT}, max-width: ${MAX_PHABLET_BREAKPOINT - 1}px)`)
        const onChange = () => {
            setIsPhablet(window.innerWidth >= MIN_PHABLET_BREAKPOINT && window.innerWidth < MAX_PHABLET_BREAKPOINT)
        }
        mql.addEventListener("change", onChange)
        setIsPhablet(window.innerWidth >= MIN_PHABLET_BREAKPOINT && window.innerWidth < MAX_PHABLET_BREAKPOINT)
        return () => mql.removeEventListener("change", onChange)
    }, [])

    return !!isPhablet
}
